﻿<template>



  <div class="app-container">

    <!-- 这是运输任务管理 -->

    <div data-v-c23b2bcc="" class="el-card search-card-box is-never-shadow">



      <div class="el-card__body">



        <!---->

        <el-form :inline="true" :model="parameter" class="demo-form-inline">

          <el-form-item label="任务编号">



            <el-input v-model="parameter.transportationNumber" placeholder="任务编号"></el-input>



          </el-form-item> 



           <el-form-item label="司机姓名">



            <el-input v-model="parameter.driverName" placeholder="司机姓名"></el-input>



          </el-form-item>



          <el-form-item label="任务状态">



            <el-select v-model="parameter.transportationTaskState" >



               <el-option label="请选择任务状态" value="0"></el-option>



              <el-option label="代发车" value="3"></el-option>



              <el-option label="在途" value="4"></el-option>



              <el-option label="已到达" value="6"></el-option>



            </el-select>



          </el-form-item>



          <el-form-item>



            <el-button type="danger" @click="findBycondition()">搜索</el-button>

            <el-button @click="resetForm('parameter')">重置</el-button>

          </el-form-item>



        </el-form>



      <!-- ----------------------------------------------------------------------------------------------------- -->



      </div>



    </div>



    <!-- 表格数据展示 -->



    <div>



      <el-table



        class="tableA"



        style="width: 100%"



        align="center"



        v-loading="loading"



        element-loading-text="拼命加载中"



        element-loading-spinner="el-icon-loading"



        :data="ALLtransportation"



      >



        <el-table-column label="序号" prop="transportationId" width="100">



        </el-table-column>



        <el-table-column



          label="运输任务编号"



          prop="transportationNumber"



          width="200"



        >



        </el-table-column>



        <el-table-column



          label="车牌号码"



          prop="transportationLicensePlateNumber"



          width="200"



        >



        </el-table-column>



        <el-table-column



          label="调度机构"



          prop="transportationSchedulingMechanism"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="起始地"



          prop="transportationTheOrigin"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="目的地"



          prop="transportationDestination"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="司机"



          prop="transshipmentTmsDriverDetails.driverName"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="运输任务状态"



          prop="transportationTaskState"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="车辆装载状态"



          prop="transportatio nLoadingConditionVehicle"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="计划提货时间"



          prop="transportationChedulePickupTime"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="实际提货时间"



          prop="transportationActualDeliveryTime"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="计划发车时间"



          prop="transportationScheduleDepartureTime"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="实际发车时间"



          prop="transportationActualDepartureTime"



          width="100"



        >



        </el-table-column>



        <el-table-column



          label="异常情况"



          prop="transportationAbnormalSituation"



          width="100"



        >



        </el-table-column>



        <el-table-column label="操作" width="300">



          <template slot-scope="scope">



            <el-button  @click.native="findysrwxq(scope.row)">查看运输任务详情</el-button>



          </template>



        </el-table-column>



      </el-table>



      <el-pagination



        :total="total"



        @size-change="handleSizeChange"



        @current-change="handleCurrentChange"



        :current-page.sync="parameter.page"



        :page-sizes="[2, 4, 6, 8]"



        :pager-count="9"



        background



        :page-size.sync="parameter.num"



        layout="total, sizes, prev, pager, next, jumper"



      >



      </el-pagination>

      <el-dialog :title="title" :visible.sync="dialogFormVisible">

        <el-form

          :model="ruleForm"

          :rules="rules"

          ref="ruleForm"

          label-width="100px"

          class="demo-ruleForm"

        >

          <el-form-item label="受捐赠单位" prop="dwid">

            <el-select

              v-model="ruleForm.dwid"

              clearable

              placeholder="受捐助单位"

            >

              <el-option

                v-for="item in options"

                :key="item.dwid"

                :label="item.dwname"

                :value="item.dwid"

              >

              </el-option>

            </el-select>

          </el-form-item>



          <el-form-item label="捐赠类型" prop="jztype">

            <template>

              <el-radio v-model="ruleForm.jztype" label="个人">个人</el-radio>

              <el-radio v-model="ruleForm.jztype" label="单位">单位</el-radio>

            </template>

          </el-form-item>

          <el-form-item label="捐赠人" prop="jzperson">

            <el-input v-model="ruleForm.jzperson" class="input"></el-input>

          </el-form-item>

          <el-form-item label="捐赠金额" prop="jzmoney">

            <el-input v-model="ruleForm.jzmoney" class="input"></el-input>

          </el-form-item>

          <el-form-item label="捐赠时间" prop="jzdate">

            <el-date-picker

              v-model="ruleForm.jzdate"

              start-placeholder="请选择捐赠时间"

              value-format="yyyy-MM-dd"

              type="date"

              placeholder="选择日期"

              style="width: 50%"

            ></el-date-picker>

          </el-form-item>

          <el-form-item label="备注" prop="jzremark">

            <el-input type="textarea" v-model="ruleForm.jzremark"></el-input>

          </el-form-item>



          <el-form-item>

            <el-button type="primary" @click="submitForm('ruleForm')"

              >保存</el-button

            >

            <el-button

              @click="(dialogFormVisible = false), resetForm('ruleForm')"

              >取消</el-button

            >

          </el-form-item>

        </el-form>

      </el-dialog>

    </div>



  </div>



</template>







<script>



export default {



  data() {



    return {



      //loading加载element-ui提供的加载事件



      loading: true,



      //表格data 循环的数据



      ALLtransportation: [],



      //修改与添加共有整合了一个头部信息



      title: "",



      //分页对应的数据 page num （id，name）对应条件



      parameter: {



        page: 1,



        num: 2,



        transportationNumber: "",



        driverName: "",



        transportationTaskState: "",



      },

      options: [],

      total: 0, 

      dialogFormVisible: false,

      //添加与修改共用的一个数据类



      ruleForm: {



        jzid: null,



        dwid: "",



        jztype: "",



        jzperson: "",



        jzmoney: "",



        jzdate: "",



        jzremark: "",



      },



      //表单判断是否为空



      rules: {



        dwid: [



          { required: true, message: "请选择受捐赠单位", trigger: "blur" },



        ],



        jztype: [{ required: true, message: "请选择类型", trigger: "blur" }],



        jzperson: [{ required: true, message: "输入捐赠人", trigger: "blur" }],



        jzmoney: [{ required: true, message: "输入金额", trigger: "blur" }],



        jzdate: [{ required: true, message: "输入时间", trigger: "blur" }],



        jzremark: [{ required: true, message: "请备注", trigger: "blur" }],



      },



    };



  },



  methods: {



    handleSizeChange() {



      this.load();



    },



    handleCurrentChange() {



      this.load();



    },



    //分页条件查询



    findBycondition() { 



      this.load();



    },



    //add 与 update 给对应数据进行赋值或者清空



    add() {



      this.title = "添加分类";



      this.ruleForm.dwid = "";



      this.ruleForm.jztype = "";



      this.ruleForm.jzperson = "";



      this.ruleForm.jzmoney = "";



      this.ruleForm.jzdate = "";



      this.ruleForm.jzremark = "";



    },



    //跳转运输任务详情页面 路由传值



    findysrwxq(scoperow) {

        this.$router.push({path:'/home/View_the_transport_task_details',query:scoperow})



      // this.dialogFormVisible = true;

    },

    //删除

    deleteRow(scope, index, allList) {

      let id = scope.jzid;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

      })

        .then(() => {

          this.axios.post("/api/jzxx/deletejzxx", { id: id }).then((res) => {

            if (res.data > 0) {

              //进行了一遍物理删除数据 （防止与数据库的连接速度过慢进行重复操作）

              allList.splice(index, 1);

              if (allList.length == 0) {

                this.parameter.page += 1;

                this.load();

              }

              this.$message({

                type: "success",

                message: "删除成功!",

              });

            }

          });

        })

        .catch(() => {

          this.$message({

            type: "info",

            message: "已取消删除",

          });

        });

    },

    //运输任务条件分页load



    load() {



      this.axios.post("/api/transshipment-tms-transportation-task-management/PageBYcondition", this.parameter).then((res) => {



        this.ALLtransportation = res.data.list;



        this.parameter.page = res.data.pageNum;



        this.parameter.num = res.data.pageSize;



        this.total = res.data.total;



          // console.log(res.data.list)



        //加载样式



        setTimeout(() => {



          this.loading = false;



        }, 1000);



      });



     



    },

    //提交

    submitForm(formName) {

      this.$refs[formName].validate((valid) => {

        if (valid) {

          if (this.title == "添加分类") {

            this.axios.post("/api/jzxx/addjzxx", this.ruleForm).then((res) => {

              if (res.data > 0) {

                this.$message({

                  type: "success",

                  message: "添加成功!",

                });

                this.dialogFormVisible = false;

                this.load();

              }

            });

          } else {

            this.resetForm.dwid = this.axios

              .post("/api/jzxx/updatejzxx", this.ruleForm)

              .then((res) => {

                if (res.data > 0) {

                  this.$message({

                    type: "success",

                    message: "修改成功!",

                  });

                  this.dialogFormVisible = false;

                  this.load();

                }

              });

          }

        } else {

          console.log("error submit!!");

          return false;

        }

      });

    },

     

    resetForm() {

      this.parameter = [];

    },

  },



  created() {



    //初始化加载



    this.load();



  },

  // resetForm(formName) {

  //       this.$refs[formName].resetFields();

  //     }

};



</script>



 



<style scoped>



.app-container {



  padding: 20px;



  background-color: #abb7d8;



}



.tableA {



  margin: 10px;



  margin-left: -0.5px;



}



/* .Aaa{



     background: #e5e9f2;



      width: 100%;



      height: 100%;



  } */







.el-col {



  border-radius: 4px;



}



.bg-purple-dark {



  background: #8baaf2;



}



.bg-purple {



  background: #e5e9f2;



}



.bg-purple-light {



  background: #e5e9f2;



}



.grid-content {



  border-radius: 4px;



  min-height: 36px;



}



.row-bg {



  padding: 10px 0;



  background-color: #f9fafc;



}



</style>
